const gulp = require('gulp')

const sass = require('gulp-sass')

const htmlmin = require('gulp-htmlmin')

const cssmin = require('gulp-cssmin')

const uglify = require('gulp-uglify')

const autoPrefixer = require('gulp-autoprefixer')

const babel = require('gulp-babel')

const webserver = require('gulp-webserver')

// const fileInclude = require('gulp-file-include')

const del = require('del')

const htmlHandler = function () {
    return gulp
        .src('./src/page/*.html')
        // .pipe(fileInclude({
        //     prefix:'0-0',
        //     basepath:'./src/components'
        // }))
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist/page/'))
}

const cssHandler = function () {
    return gulp
        .src('./src/css/*.css')
        .pipe(autoPrefixer())
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css/'))
}

const jsHandler = function () {
    return gulp
        .src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))
}

const scssHandler = function () {
    return gulp
        .src('./src/scss/*.scss')
        .pipe(sass())
        .pipe(autoPrefixer())
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/scss/'))
}

const libHandler = function () {
    return gulp
        .src('./src/lib/**')
        .pipe(gulp.dest('./dist/lib/'))
}

const imgHandler = function () {
    return gulp
        .src('./src/images/**')
        .pipe(gulp.dest('./dist/images/'))

}

const delHandler = function(){
    return del(['./dist/'])
}

/*
    gulp 前端自动化打包构建工具
      + 打包 压缩文件
      + 将来开发完毕后吧压缩文件上线
      + 和后端没有关系
    gulp-webserver
      + 在开发过程中给你启动一个服务器
      + 让你的页面在服务器环境下跑
      + 为了自动刷线和可以发送 ajax
*/

const webHandler = function(){
    return gulp
        .src('./src')
        .pipe(webserver({
            host:'www.yjf.com',
            port:'8080',
            livereload:true,
            open:'./page/login.html',
            proxies:[
                {
                    source:'/jm',
                    target:'http://bj.jumei.com/Ajax'
                    // http://bj.jumei.com/Ajax/GetHomeTodayLists/100/1
                },
                {
                    source: '/login',
                    target: 'http://localhost/server/login.php'
                },
                {
                    source: '/zhuce',
                    target: 'http://localhost/server/zhuce.php'
                },
                {  
                    source: '/list',
                    target: 'http://localhost/server'
                },
                {  
                    source: '/nav',
                    target: 'http://localhost/server/bindnav.php'
                },
                {   
                    source:'/tj',
                    target:'http://www.jumei.com/i/ajax/get_view_history'
                }
            ]
        }))
}

const sass2 = function(){
    return gulp
        .src('./src/scss/*.scss')   //这是需要转化的sass文件
		.pipe(sass())
		.pipe(gulp.dest('./src/css')) //这是转化后css的文件
}



const watchHandler = function () {
    gulp.watch('./src/scss/*.scss',sass2)
    gulp.watch('./src/css/*.css',cssHandler)
    gulp.watch('./src/scss/*.scss',scssHandler)
    gulp.watch('./src/js/*.js',jsHandler)
    gulp.watch('./src/page/*.html',htmlHandler) 
}

    module.exports.delHandler = delHandler
    
    module.exports.sass2 = sass2

    module.exports.default = gulp.series(
        delHandler,
        gulp.parallel(htmlHandler, cssHandler, scssHandler, sass2, jsHandler, libHandler, imgHandler),
        scssHandler,
        sass2,
        webHandler,
        watchHandler
    )